<template>
  <div class='tabbar'>
    <mt-tabbar v-model="selected">
      <mt-tab-item id="index">
        <i slot="icon"
           class='fa fa-home fa-lg'></i>
        首页
      </mt-tab-item>
      <mt-tab-item id="category">
        <i slot="icon"
           class='fa fa-list-ul fa-lg'></i>
        分类
      </mt-tab-item>
      <mt-tab-item id="cart">
        <i slot="icon"
           class='fa fa-shopping-cart fa-lg'></i>
        购物车
      </mt-tab-item>
      <mt-tab-item id="me">
        <i slot="icon"
           class='fa fa-smile-o fa-lg'></i>
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: 'tabbar',
  data () {
    return {
      selected: 'index'
    }
  }
}
</script>

<style lang="less" scoped>
// 选中样式
.mint-tabbar > .mint-tab-item.is-selected {
  color: #ff734c;
  background-color: #fff;
}
</style>
